<template>
	<view>
		<z-paging :fixed="true" ref="paging" v-model="dataList" @query="queryList">
			<view class="study-box d-s-c word-box-hover" v-for="(item, index) in dataList" :key="index">
				<view class="book-image">
					<image :src="item.book_img" mode=""></image>
				</view>
				<view class="study-info flex-1">
					<view class="book-name ellipsis-1-lines mb10">{{item.book_name}}</view>
					<view class="d-s-c f26 gray6 mb10">
						<image class="icon" src="/static/my/books_icon.png" mode=""></image>
						<view class="ml10">第{{item.lesson}}节课</view>
						<view class="ml30">学习{{item.total_word_num}}个单词</view>
					</view>
					<view class="d-s-c f26 gray6 mb10">
						<image class="icon" src="/static/my/time_icon.png" mode=""></image>
						<view class="ml10">{{item.createtime_text}}</view>
					</view>
					<view class="d-s-c">
						<view class="button d-c-c" @click="print(item.study_id)">
							<image src="/static/index1/47.png" mode=""></image>
							<view class="f24">打印</view>
						</view>
						<view class="button d-c-c">
							<image src="/static/index1/48.png" mode=""></image>
							<view class="f24">复习</view>
						</view>
						<view class="button d-c-c button1" @click="feedback(item.study_id)">
							<image src="/static/index1/49.png" mode=""></image>
							<view class="f24">反馈</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
			}
		},
		onLoad() {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.$u.post(this.$u.api.studyList, {
					pageNo: pageNo,
					pageSize: pageSize,
				}).then((res) => {
					if (res.code == 1) {
						this.$refs.paging.complete(res.data.data)
					} else {
						this.$refs.paging.complete(false)
					}
				}).catch((err) => {
					this.$refs.paging.complete(false)
				})
			},
			print(id) {
				let url = getApp().globalData.baseUrl + '/index/index/print?study_id=' + id
				// #ifdef APP
				plus.runtime.openURL(url, function(res) {
					console.log(res)
					uni.showModal({
						content: "本机未检测到Edge客户端，是否其他浏览器访问？",  
						success: function(res){
							if (res.confirm) {
								plus.runtime.openURL(url)
							}
						}  
					})
				}, 'com.microsoft.emmx')
				// #endif
				// #ifdef H5
				window.location.href = url
				// #endif
				// uni.navigateTo({
				// 	url: '/pages/webview/webview?url=' + url
				// })
			},
			feedback(studyId) {
				uni.navigateTo({
					url: '/pages/study/feedback?studyId=' + studyId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.study-box {
		width: calc(100% - 60rpx);
		padding: 20rpx 30rpx;
		margin: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		
		.book-image {
			width: 150rpx;
			height: 200rpx;
			margin-right: 20rpx;
			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		
		.study-info {
			
			.book-name {
				width: 220rpx;
				font-size: 30rpx;
				color: #333333;
				font-weight: 600;
			}
			.icon {
				display: block;
				width: 24rpx;
				height: 24rpx;
			}
			.button {
				height: 50rpx;
				padding: 0 20rpx;
				margin-right: 20rpx;
				border: 1rpx solid #4BB0FF;
				border-radius: 30rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #4BB0FF;
				line-height: 50rpx;
				image {
					display: block;
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
			.button1 {
				border-color: #FF6010 !important;
				color: #FF6010 !important;
			}
		}
	}
</style>
